<template>
  <j-modal :title="title" :width="700" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk"
    :cancelButtonProps="footerBtnProps" :okButtonProps="footerBtnProps">
    <a-form-model ref="form" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="formRules">
      <a-row :gutter="30">
        <a-col :span="12">
          <a-form-model-item label="咨询师姓名：" prop="name">
            <a-input v-model="form.name" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
          <a-form-model-item label="业务领域：" prop="businessArea">
            <a-input v-model="form.businessArea" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
          <a-form-model-item label="联系电话：" prop="telphone">
            <a-input v-model="form.telphone" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
          <a-form-model-item label="所在机构：" prop="organizationId">
            <a-select v-model="form.organizationId" placeholder="请选择" :disabled="disabled" @focus="getOrganize">
              <a-select-option :value="item.id" v-for="item in areaOptions" :key="item.id">
                {{item.organizationName}}
              </a-select-option>
            </a-select>
            <!-- <a-cascader :options="areaOptions" :display-render="displayRender" placeholder="请选择"
              :load-data="loadCascader" changeOnSelect expand-trigger="hover"
              :fieldNames="{ label: 'name', value: 'code', children: 'children' }" change-on-select :disabled="disabled"
              v-model="form.mechanismId" /> -->
          </a-form-model-item>
          <a-form-model-item label="工号：" prop="workNo">
            <a-input v-model="form.workNo" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
          <a-form-model-item label="VPN账号：" prop="vpnAccount">
            <a-input v-model="form.vpnAccount" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
          <a-form-model-item label="VPN密码：" prop="vpnPassword" v-if="!form.id">
            <a-input v-model="form.vpnPassword" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <j-image-upload v-model="form.avatarId" :disabled="disabled" bizPath="scott/pic" :isMultiple="false" />
        </a-col>
      </a-row>

      <a-form-model-item label="律师简介：" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" prop="briefIntroduction">
        <a-textarea v-model="form.briefIntroduction" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }"
          :disabled="disabled" />
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
  import {
    getXzqhList,
    getXzqhByCode,
  } from '@/api/api'
  import {
    addMechTeacher
  } from '@/api/sjsk/psycholog/organize'
  import {
    pageNewMech
  } from '@/api/sjsk/psycholog/organize'
  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      footerBtnProps: function() {
        return {
          style: {
            display: this.disabled ? 'none' : 'inline-block'
          }
        }
      }
    },
    created() {
      this.getOrganize()
    },
    data() {
      return {
        title: '新增机构',
        visible: false,
        areaOptions: [],
        form: {
          name: '',
          businessArea: '',
          telphone: '',
          workNo: '',
          vpnAccount: '',
          vpnPassword: '',
          avatarId: '',
          mechanismId: null,
          briefIntroduction: ''
        },
        formRules: {
          name: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          businessArea: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          telphone: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          workNo: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          vpnAccount: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          vpnPassword: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          briefIntroduction: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          mechanismId: {
            required: true,
            message: '请选择',
            trigger: ['blur']
          },
        }
      }
    },
    methods: {
      async getOrganize() {
        await pageNewMech({
          "departmentId": "",
          "name": ""
        }).then(res => {
          const {
            result
          } = res
          this.areaOptions = result
        })
      },
      displayRender({
        labels
      }) {
        return labels[labels.length - 1];
      },
      show(data) {
        this.visible = true
        if (data) {
          this.title = '编辑咨询师'
          
          this.form = data
        } else {
          this.title = '新增咨询师'
        }
        if (this.disabled) {
          this.title = '咨询师详情'
        }
      },
      resetForm() {
        this.form = {
          name: '',
          businessArea: '',
          telphone: '',
          workNo: '',
          vpnAccount: '',
          vpnPassword: '',
          avatarId: '',
          organizationId: '',
          briefIntroduction: ''
        }
      },
      onTimeChange() {

      },
      handleCancel() {
        this.visible = false
      },
      handleOk() {
        this.$refs.form.validate().then(res => {
          addMechTeacher(this.form).then(res => {
            const {
              success,
              message
            } = res
            if (success) {
              this.visible = false
              this.$message.success('添加成功！')
              this.$emit('success')
            } else {
              this.$message.error(message)
            }
          })
        })

      }
    },
  }
</script>
<style lang="less" scoped>
  /deep/.ant-form-item {
    margin-bottom: 10px;
  }
</style>
